、<template>
  <view>
    <u-modal
      v-model="show"
      :content="content"
      @confirm="confirm"
      @cancel="show = false"
      :show-cancel-button="true"
    />
    <u-search
      @search="search"
      :show-action="false"
      input-align="center"
      height="70"
      :clearabled="true"
      placeholder="请输入学号或姓名"
      v-model="searchContent"
    />
    <u-empty v-if="isEmpty" text="暂无成员" mode="list" />
    <view v-if="isShow">
      <view class="message-list">
        <u-swipe-action
          :show="false"
          :index="i"
          :disabled="true"
          v-for="(m, i) in auditList"
          :key="m.id"
        >
          <view class="uni-swipe-action">
            <u-checkbox
              v-model="m.checked"
              active-color="blue"
              :label-disabled="false"
              :size="45"
            >
              <view class="item">
                <block>
                  <view class="item-left">
                    <avatar-group :avatar="m.avatar" :text="m.name" />
                  </view>
                  <view class="item-middle">
                    <text class="title">{{ m.num }} {{ m.name }}</text>
                    <view class="message"
                      >申请时间：{{ m.gmtCreate | dateFormat }}</view
                    >
                  </view>
                  <view class="item-right">
                    <view class="time">1</view>
                  </view>
                </block>
              </view>
            </u-checkbox>
          </view>
        </u-swipe-action>
      </view>

      <u-loadmore v-if="!isEmpty" :status="status" />
    </view>
    <view class="audit-bottom-btn">
      <view class="all-btn centerboth">
        <u-checkbox
          v-model="all"
          active-color="blue"
          :label-disabled="false"
          :size="45"
          @change="allChange"
          >全选</u-checkbox
        >
      </view>
      <view class="all-count centerboth">
        共选中{{ count }}人
      </view>
      <view class="audit-btn-box centerboth">
        <view class="pass-btn  centerboth" @click="auditClick(2)"> 通过 </view>
        <view class="reject-btn  centerboth" @click="auditClick(3)">拒绝</view>
      </view>
    </view>
  </view>
</template>

<script>
import avatarGroup from "@/components/avatar_group/avatar_group.vue";
import { mapGetters } from "vuex";
export default {
  name: "user-list",
  components: {
    avatarGroup,
  },
  data() {
    return {
      // 是否是创建者
      isCreateUser: false,
      isEmpty: false,
      searchContent: "",
      auditList: [],
      pageNum: 1,
      total: 0,
      pages: 0,
      status: "",
      show: false,
      content: "您确定要拒绝吗？",
      currentIndex: "",
      currentId: "",
      isShow: false,
      cid: "",
      type: "1",
      all: false,
      auditStatus: null
    };
  },
  computed: {
    ...mapGetters(["id"]),
    count(){
      if(this.all){
        return this.auditList.length;
      }else {
        return this.auditList.filter(val => val.checked).length;
      }
    }
  },
  async onLoad(e) {
    uni.$emit("setVuexUserInfo", { user: null, isLoginPage: false });
    this.cid = e.id;
    this.type = e.type;
    await this.initial();
  },
  async onPullDownRefresh() {
    this.auditList = [];
    await this.initial();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  async onReachBottom() {
    this.pageNum = this.pageNum + 1;
    this.status = "loading";
    if (this.pageNum < this.pages) {
      await this.getCourseMemberList();
      this.status = "loadmore";
    } else {
      this.pageNum = this.pageNum - 1;
      setTimeout(() => {
        this.status = "nomore";
      }, 1000);
    }
  },
  methods: {
    allChange(detail){
      if(detail.value){
        this.auditList.forEach(value => {
          value.checked = true;
        })
      }else{
        this.auditList.forEach(value => {
          value.checked = false;
        })
      }
    },
    async auditClick(status){
      if(status == 2){
        await this.auditBatch(status);
      }else {
        this.auditStatus = status;
        this.isShow = true;
      }
    },
    async auditBatch(status){
      const ids = this.auditList.filter(val => val.checked).map(value => value.id);
      if(ids == null || ids.length == 0){
				return;
			}
      const data = {
        status: status,
        id: this.cid,
        ids: ids
      }
      const res = await this.$u.api.auditBatch(this.type, data);
      if(res.code == 200){
        this.$u.toast("审核成功");
        this.initial();
      }else{
        this.$u.toast("审核失败");
      }
    },
    async initial() {
      // 初始化
      this.pageNum = 1;
      this.total = 0;
      this.searchContent = "";
      await this.getAuditUserVos();
    },
    async search() {
      // 搜索成功再显示
      this.isShow = false;
      this.pageNum = 1;
      await this.getAuditUserVos();
    },
    // 查询用户
    async getAuditUserVos() {
      const res = await this.$u.api.getAuditUserVos(this.type, this.cid, {
        pageNum: this.pageNum,
        searchContent: this.searchContent,
        status: 1,
      });
      if (res.total === 0) {
        this.isEmpty = true;
        this.isShow = false;
      } else {
        const data = res.data;
        for (const index in data) {
          data[index].checked = false;
        }
        if (this.pageNum > 1) {
          // 第二页用拼接
          this.auditList.concat(data);
        } else {
          // 第一页直接赋值
          this.auditList = data;
          this.isShow = true;
        }
        this.isEmpty = false;
        this.total = res.total;
        this.pages = res.pages;
      }
    },
    async confirm() {
      await this.auditBatch(this.auditStatus);
    },
  },
  
};
</script>

<style lang="scss">
.uni-swipe-action {
  width: 100%;
  padding-left: 10rpx;
}

.item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10upx 16upx;
  background-color: #fff;
  border-bottom: 1px solid rgb(243, 243, 243);

  &.stick {
    background-color: rgba(243, 236, 221, 0.5);
  }

  .item-left {
    text-align: center;

    .image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      background-color: #eee;
    }

    .avatar {
      width: 100rpx;
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      background: #4191ea;
      border-radius: 50%;
      overflow: hidden;

      .iconfont {
        width: 100rpx;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
        color: #fff;
        font-size: 40rpx;
      }
    }
  }

  .item-middle {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    margin-left: 15rpx;
    overflow: hidden;

    .title {
      width: 100%;
      color: #000;
      font-family: "微软雅黑";
      font-weight: 400;
      font-size: 37rpx;
      height: 50rpx;
      line-height: 60rpx;
      overflow: hidden;
      /*自动隐藏文字*/
      text-overflow: ellipsis;
      /*文字隐藏后添加省略号*/
      white-space: nowrap;
      /**强制不换行*/
    }

    .message {
      width: 100%;
      font-family: "微软雅黑";
      color: #808080;
      height: 50rpx;
      font-weight: bold;
      line-height: 40rpx;
      font-size: 27rpx;
    }
  }

  .item-right {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 27rpx;
    font-weight: bold;

    .time {
      color: #808080;
      height: 60rpx;
      line-height: 60rpx;
    }

    .mark {
      background-color: #f74c31;
      line-height: 35rpx;
      text-align: center;
      font-size: 20rpx;
      min-width: 35rpx;
      min-height: 35rpx;
      border-radius: 18rpx;
      color: #fff;
    }
  }
}

.audit-bottom-btn {
  position: fixed;
  width: 100%;
  height: 100rpx;
  background: #ffffff;
  left: 0;
  bottom: 0;
  z-index: 6;
  box-shadow: 0px -5px 10px -5px #d0d0d0;
  padding: 0 300rpx 0 40rpx;
  display: flex;
  justify-content: space-between;
  .all-btn {
    height: 100%;
    float: left;
  }
  .all-count {
    margin-right: 60rpx;
  }
  .audit-btn-box {
    position: absolute;
    right: 0;
    height: 100%;
    z-index: 9;
    top: 0;
    view {
      width: 150rpx;
      height: 100%;
      cursor: pointer;
    }
  }
  .reject-btn {
    background: red;
    color: #ffffff;
  }
  .pass-btn {
    background: $u-type-primary;
    color: #ffffff;
  }
}
.centerboth {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
